<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-09-01
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2024-03-05
 * @FilePath: /element-admin/src/views/FoodCalDinnerTab.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="Food-Cal-DinnerTab-page">
    <!--顶部搜索栏-->
<!--    <div class="col-md-12">-->
<!--      <el-row :gutter="20">-->
<!--        <el-col :span="22" :offset="1" class="clearfix">-->
<!--          <el-form :inline="true" :model="query" class="demo-form-inline">-->
<!--            <el-form-item label="计算天数">-->
<!--              <el-select v-model="query.days" placeholder="计算天数" size="small">-->
<!--                <el-option label="请选择计算天数" value=-1></el-option>-->
<!--                <el-option v-for="item in days_options" v-bind:key="item.value" :data="item"-->
<!--                           :label="item.label"-->
<!--                           :value=item.value></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="允许重复数据">-->
<!--              <el-switch-->
<!--                  v-model="query.sameFoodFlg"-->
<!--                  active-value="1"-->
<!--                  inactive-value="0"-->
<!--                  active-color="#13ce66"-->
<!--                  inactive-color="#ff4949"-->
<!--                  active-text="允许"-->
<!--                  inactive-text="不允许">-->
<!--              </el-switch>-->
<!--            </el-form-item>-->
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="handleDinnerExut" :disabled="exDis" size="small">1.菜品计算</el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <div class="mainTabTable">
            <el-table :data="FoodCalDayList"
                      :cell-style="{padding:'5px'}" :key="isIndex" v-loading="isLoading" border stripe row-key="id">
              <el-table-column v-if="isIndex == 1" type="index" label="天数" width="75" fixed></el-table-column>
              <el-table-column prop="cal_day" label="日期"  fixed>
                <template v-slot="scope">
                  <span>第{{scope.$index+1}}天</span>
                </template>
              </el-table-column>
              <!-- --------------------------------------------------------------------------------------------- 早餐 -->
              <el-table-column prop="list" label="早餐" width="350">
                <template v-slot="scope">
                  <el-descriptions class="margin-top" :column="2" :size="'mini'" border :contentStyle="content_style" :label-style="label_style" >
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.zaocan.protein" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-food"></i> 蛋白质</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.zaocan.vitamin" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-dish"></i> 维生素</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.zaocan.carbonWater" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-fork-spoon"></i> 碳水化合</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.zaocan.fat" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-fork-spoon"></i> 脂肪</template>
                      {{item.name}}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
              <!-- --------------------------------------------------------------------------------------------- 午餐 -->
              <el-table-column prop="list" label="午餐" width="350">
                <template v-slot="scope">
                  <el-descriptions class="margin-top" :column="2" :size="'mini'" border :contentStyle="content_style" :label-style="label_style" >
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wucan.protein" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-food"></i> 蛋白质</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wucan.vitamin" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-dish"></i> 维生素</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wucan.carbonWater" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-fork-spoon"></i> 碳水化合</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wucan.fat" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-fork-spoon"></i> 脂肪</template>
                      {{item.name}}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
              <!-- --------------------------------------------------------------------------------------------- 晚餐 -->
              <el-table-column prop="list" label="晚餐" width="350">
                <template v-slot="scope">
                  <el-descriptions class="margin-top" :column="2" :size="'mini'" border :contentStyle="content_style" :label-style="label_style" >
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wancan.protein" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-food"></i> 蛋白质</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wancan.vitamin" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-dish"></i> 维生素</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wancan.carbonWater" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-fork-spoon"></i> 碳水化合</template>
                      {{item.name}}
                    </el-descriptions-item>
                    <el-descriptions-item :span="2" v-for="item in scope.row.list.wancan.fat" v-bind:key="item.name">
                      <template slot="label"><i class="el-icon-fork-spoon"></i> 脂肪</template>
                      {{item.name}}
                    </el-descriptions-item>
                  </el-descriptions>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import {exutDayDinner} from "@/api/MemberWeight";

export default {
  name: "FoodCalDinnerTabView",
  components: {},
  data() {
    return {
      isIndex: 1,
      isLoading: false,
      exDis: false,
      tabId: "",
      query: {
        key: '',
        days: 1,
        sameFoodFlg: "1",
        pageSize: 20,
        pageNum: 1,
      },
      days_options: [
        {label: "1", value: 1, key: 1},
        {label: "3", value: 3, key: 3},
        {label: "5", value: 5, key: 5},
        {label: "7", value: 7, key: 7},
      ],
      tableHeight: 650,
      FoodCalDayList: [],
      content_style: {
        'text-align': 'center',
        'min-width': '100px',
        'word-break': 'break-all'
      },
      label_style: {
        'color': '#000',
        'text-align': 'left',
        'background-color': '#d6dbe1',
        'min-width': '80px',
        'word-break': 'keep-all'
      }
    }
  },
  props: {
    drawId: {type: [Object, String], default: ""}
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    init_obj() {
      return {
        FoodCalDayList: [],
      }
    },
    handle_init(tabId) {
      this.tabId = tabId;
      this.init_obj();
    },
    handleDinnerExut() {
      this.init_obj();
      this.isLoading = true;
      // this.exDis = true;
      exutDayDinner(this.query).then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.FoodCalDayList = res.data.list;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
        }
      }).catch(err => {
        this.$notify({title: '执行失败', message: '数据操作异常' + err, type: 'error', offset: 100});
      });
    },
    async DinnerExut(query) {
      this.init_obj();
      this.isLoading = true;
      // this.exDis = true;
      await exutDayDinner(query).then(res => {
        if (res.code == 200) {
          this.isLoading = false;
          this.exDis = false;
          this.FoodCalDayList = res.data;
          this.$notify({title: '执行成功', message: '数据操作完成', type: 'success', offset: 100});
          return 200;
        }
        return 500;
      }).catch(err => {
        this.$notify({title: '执行失败', message: 'STEP A 数据操作异常' + err, type: 'error', offset: 100});
      });
    },
  },
  created() {

  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        this.handle_init(drawId);
      }
    }
  }
}
</script>
<style scoped>
.mainTabTable {
  overflow-x: hidden;
  overflow-y: auto;
  /*height: 1450px*/
}
</style>